<template>
  <div class="MaintenanceStaff">
    <div class="MaintenanceStaff_top">
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link">
          {{ proname }}
          <img src="../../assets/images/cut.png" alt class="cut" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in serviceSelList"
            :key="item.id"
            :command="item.id"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="MaintenanceStaff_center">
      <el-form label-width="100px" class="demo-ruleForm" :inline="true">
        <el-form-item label="员工编号 :" prop="jobNo" class="ruleForm_input">
          <el-input
            v-model="deviceListQuery.jobNo"
            @change="getemployeeSearch"
            clearable
            placeholder="请输入员工编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名 :" prop="petName" class="ruleForm_input">
          <el-input
            v-model="deviceListQuery.petName"
            @change="getemployeeSearch"
            clearable
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备型号 :" prop="modelId" class="ruleForm_input">
          <el-select
            v-model="deviceListQuery.modelId"
            placeholder="请选择设备型号"
            clearable
            @change="getemployeeSearch"
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作状态 :" prop="workSatus">
          <el-select
            v-model="deviceListQuery.workSatus"
            placeholder="请选择工作状态"
            clearable
            @change="getemployeeSearch"
          >
            <el-option label="工作中" value="1"></el-option>
            <el-option label="休息中" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="在职/离职 :" prop="isOnJob">
          <!-- @change="handlerJob" -->
          <el-select
            v-model="deviceListQuery.isOnJob"
            placeholder="请选择在职/离职"
            clearable
            @change="getemployeeSearch"
          >
            <el-option
              v-for="(item, index) in staffStatu"
              :key="index"
              :label="item.status"
              :value="item.isOnJob"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="星际评价 :" prop="name">
          <el-select v-model="deviceListQuery.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="getemployeeSearch"
            >确认搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="showAddmaintenance"
            >添加操作员工</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="employeeList"
      style="margin-top: 20px"
      border
      :header-cell-style="{
        width: '100%',
        background: '#FAFAFA',
        color: '#606266',
        height: '60px'
      }"
    >
      <el-table-column prop="no" label="序号" width="80"></el-table-column>
      <el-table-column prop="date" label="人员信息" width="390">
        <template slot-scope="scoped">
          <div>
            <ul class="tableUl">
              <li>
                <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                <span>员工编号:{{ scoped.row.jobNo }}</span>
              </li>
              <li>
                <img src="../../assets/images/zh/负责人.png" alt />
                <span>员工姓名:{{ scoped.row.petName }}</span>
              </li>
              <li>
                <img src="../../assets/images/zh/联系方式.png" alt />
                <span>手机号码:{{ scoped.row.phone }}</span>
              </li>
              <li>
                <img src="../../assets/images/zh/组 347.png" alt />
                <span>擅长类型:{{ scoped.row.typeName }}</span>
              </li>
              <li>
                <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                <span>擅长型号:{{ scoped.row.modelName }}</span>
              </li>
            </ul>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stats" label="星级评价">
        <template slot-scope="scoped">
          <div>
            <el-rate v-model="scoped.row.stats" disabled></el-rate>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="wokerKind" label="员工种类">
        <template slot-scope="scoped">
          <div>
            <el-link type="primary" v-if="scoped.row.wokerKind == 1"
              >客服人员</el-link
            >
            <el-link type="success" v-else-if="scoped.row.wokerKind == 2"
              >操作员工</el-link
            >
            <el-link type="warning" v-else-if="scoped.row.wokerKind == 3"
              >负责人</el-link
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderCount" label="派单数"></el-table-column>
      <el-table-column prop="workSatus" label="工作状态">
        <template slot-scope="scoped">
          <div>
            <el-tag type="success" v-if="scoped.row.workSatus == 1"
              >工作中</el-tag
            >
            <el-tag type="danger" v-else-if="scoped.row.workSatus == 2"
              >休息中</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="workTime"
        label="工作时长(h)"
        width="100"
      ></el-table-column>
      <el-table-column prop="isOnJob" label="开启在职/离职" width="120">
        <template slot-scope="scoped">
          <div>
            <el-switch
              v-model="scoped.row.isOnJob"
              @change="handlerStatus($event, scoped.row)"
            ></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="280">
        <template slot-scope="scoped">
          <div>
            <el-tag
              type="success"
              @click="showEditmaintenance(scoped.row.workerId, scoped.row)"
              >编辑</el-tag
            >
            <el-tag
              type="warning"
              @click="showlookmaintenance(scoped.row.workerId, scoped.row)"
              >查看</el-tag
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="deviceListQuery.pageSize"
        :current-page="deviceListQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="devicetotal"
        class="management_page"
      ></el-pagination>
    </div>
    <el-dialog
      :title="maintenanceName"
      :visible.sync="maintenanceDialog"
      width="30%"
      @close="handleClose"
    >
      <el-form
        :model="maintenanceForm"
        :rules="maintenanceRules"
        ref="maintenanceRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="服务商列表" prop="serviceId">
          <el-select
            v-model="maintenanceForm.serviceId"
            placeholder="请选择服务商"
            clearable
            :disabled="maintenanceDisabled"
            @change="handleSelectserviceId(maintenanceForm.serviceId)"
          >
            <el-option
              v-for="item in serviceSelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属用户" prop="userId" v-if="showMessage">
          <el-select
            v-model="maintenanceForm.userId"
            placeholder="请选择所属用户"
            clearable
            :disabled="maintenanceDisabled"
            @change="handlerGet"
          >
            <el-option
              v-for="item in FreeWorkerList"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="公司名称:" prop="companyId">
          <el-select
            v-model="maintenanceForm.companyId"
            clearable
            placeholder="请选择公司名称"
            @change="handlercompanyId"
          >
            <el-option
              v-for="item in companySelList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="员工号" prop="jobNo">
          <el-input
            v-model="maintenanceForm.jobNo"
            :disabled="maintenanceDisabled"
            placeholder="请输入员工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="petName">
          <el-input
            v-model="maintenanceForm.petName"
            :disabled="maintenanceDisabled"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工手机号" prop="phone">
          <el-input
            v-model="maintenanceForm.phone"
            :disabled="phoneDisabled"
            placeholder="请输入员工手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工种类" prop="wokerKind">
          <el-select
            v-model="maintenanceForm.wokerKind"
            placeholder="请选择员工种类"
            clearable
            @change="handleSelectwokerKind(maintenanceForm.wokerKind)"
            :disabled="maintenanceDisabled"
          >
            <el-option
              v-for="item in wokerKindList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="typeId" v-if="wokerKindId == 2">
          <el-select
            v-model="maintenanceForm.typeId"
            placeholder="请选择设备类型"
            clearable
            multiple
            @change="handleSelecttypeId(maintenanceForm.typeId)"
            :disabled="maintenanceDisabled"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号" prop="modelId" v-if="wokerKindId == 2">
          <el-select
            v-model="maintenanceForm.modelId"
            placeholder="请选择设备型号"
            clearable
            multiple
            @change="handleSelectmodelId(maintenanceForm.modelId)"
            :disabled="maintenanceDisabled"
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属角色" prop="roleId">
          <el-select
            v-model="maintenanceForm.roleId"
            placeholder="请选择所属角色"
            clearable
            @change="handleSelectroleId(maintenanceForm.roleId)"
            :disabled="maintenanceDisabled"
          >
            <el-option
              v-for="item in roleSelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否审核" prop="examine">
          <el-select
            v-model="maintenanceForm.examine"
            clearable
            placeholder="请选择审核状态"
            :disabled="maintenanceDisabled"
          >
            <el-option
              v-for="item in examineList"
              :label="item.name"
              :value="item.examine"
              :key="item.examine"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="maintenanceDialog = false">取 消</el-button>
        <el-button type="primary" @click="handlerSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  employeeUpdate,
  employeeAdd,
  devicTypeList,
  devicModelList,
  serviceSel,
  employeeSearch,
  employeeDetail,
  changeStatus,
  roleSelNoPage,
  serviceRight,
  companySel,
  getFreeWorker
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      value1: null,
      ruleForm: {},
      rules: {},
      //   分页
      deviceListQuery: {
        pageSize: 10,
        pageNumber: 1,
        companyId: "",
        jobNo: "",
        petName: "",
        onWork: "",
        modelId: "",
        isOnJob: "",
        startTime: "",
        endTime: "",
        serviceId: this.value
      },
      Status: true,
      devicetotal: 0,
      maintenanceDialog: false,
      maintenanceName: "add",
      // 员工的表单
      maintenanceForm: {
        serviceId: "",
        jobNo: "",
        petName: "",
        phone: "",
        modelId: [],
        typeId: [],
        userId: "",
        employee_id: "",
        user_id: "",
        wokerKind: "",
        roleId: "",
        companyId: "",
        examine: ""
      },
      maintenanceRules: {
        serviceId: [
          { required: true, message: "请输入服务商名称", trigger: "blur" }
        ],
        companyId: [{ required: true, message: "请选择公司", trigger: "blur" }],
        userId: [
          { required: true, message: "请选择所属用户", trigger: "blur" }
        ],

        examine: [
          { required: true, message: "请选择审核状态", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误"
          }
        ],
        jobNo: [{ required: true, message: "请输入员工工号", trigger: "blur" }],
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        modelId: [
          { required: true, message: "请选择设备型号", trigger: "blur" }
        ],
        typeId: [
          { required: true, message: "请选择设备类型", trigger: "blur" }
        ],
        wokerKind: [
          { required: true, message: "请选择员工种类", trigger: "blur" }
        ]
      },
      maintenanceDisabled: false,
      phoneDisabled: false, // 手机号禁用
      // 设备类型列表
      typeList: [],
      //设备型号列表
      versionList: [],
      //设备无分页列表
      serviceSelList: [],
      // 员工列表
      employeeList: [],
      // 详情的列表
      employeeDetailList: [],
      // 在职/离职
      staffStatu: [
        {
          id: 1,
          status: "在职",
          isOnJob: 1
        },
        {
          id: 1,
          status: "离职",
          isOnJob: 0
        }
      ],
      //员工种类
      wokerKindList: [
        {
          id: 1,
          name: "客服人员"
        },
        {
          id: 2,
          name: "操作员工"
        },
        {
          id: 3,
          name: "负责人"
        }
      ],
      // 角色列表
      roleSelList: [],
      // 所属角色禁用
      roleDiabled: false,
      // 公司的列表
      companySelList: [],
      // 是否审核
      examineList: [
        {
          examine: 1,
          name: "通过审核"
        },
        {
          examine: 2,
          name: "未审核"
        },
        {
          examine: 3,
          name: "未通过审核"
        }
      ],
      // 员工种类
      wokerKindId: "",
      value: "",
      // 空闲人员的数据
      FreeWorkerList: [],
      showMessage: true,
      messageWorkerId: ""
    };
  },
  computed: {
    ...mapState(["org_id"]),
    proname() {
      if (this.serviceSelList.length == 0) {
        return "";
      }
      const index = this.serviceSelList.filter(v => v.id == this.value)[0];
      return index["name"];
    }
  },
  watch: {
    org_id(val) {
      window.sessionStorage.removeItem("servierID");
      this.deviceListQuery.pageNumber = 1;
      this.getserviceSel();

      this.getSelect();
      this.getemployeeSearch();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getserviceSel();

        this.getSelect();
        this.getemployeeSearch();
      }
    },
    handleCommand(command) {
      this.value = command;
      window.sessionStorage.setItem("servierID", this.value);
      this.getSelect();
      this.getemployeeSearch();
    },
    // 获取服务商空闲人员
    handlergetFreeWorker() {
      this.postRequest(getFreeWorker).then(res => {
        if (res.code == 200) {
          this.FreeWorkerList = res.data;
        }
      });
    },
    handlerGet(val) {
      this.FreeWorkerList.map(item => {
        if (item.userId == val) {
          this.maintenanceForm.petName = item.realName;
          this.maintenanceForm.phone = item.phone;
        }
      });
    },
    // 选择离职还是在职
    handlerJob(val) {
      const params = {
        pageNumber: this.deviceListQuery.pageNumber,
        pageSize: this.deviceListQuery.pageSize,
        isOnJob: val,
        companyId: this.org_id
      };
      this.postRequest(employeeSearch, params).then(res => {
        if (res.code == 200) {
          res.data.data.map(item => {
            if (item.isOnJob == 1) {
              item.isOnJob = true;
              return;
            } else if (item.isOnJob == 0) {
              item.isOnJob = false;
              return;
            }
          });
          res.data.data.map(item => {
            item.stats = Number(item.stats);
          });
          this.employeeList = res.data.data;
          this.devicetotal = res.data.count;
        }
      });
    },
    // 角色查询
    getroleSel() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        PermissionType: 3,
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage, params).then(res => {
        if (res.code == 200) {
          this.roleSelList = res.data;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.deviceListQuery.pageSize = val;
      this.getemployeeSearch();
    },
    handleCurrentChange(val) {
      this.deviceListQuery.pageNumber = val;
      this.getemployeeSearch();
    },
    // 根据用户id获取服务商id
    // getserviceRight(){
    //   const params={
    //     userId:window.sessionStorage.getItem("userId")
    //   }
    //   this.postRequest(serviceRight,params).then(res=>{
    //     this.deviceListQuery.serviceId=res.data
    //   })
    // },
    // 获取操作员工列表
    getemployeeSearch() {
      this.deviceListQuery.companyId = this.org_id;
      this.deviceListQuery.serviceId = this.value;
      this.postRequest(employeeSearch, this.deviceListQuery).then(res => {
        if (res.code == 200) {
          res.data.data.map(item => {
            if (item.isOnJob == 1) {
              item.isOnJob = true;
              return;
            } else if (item.isOnJob == 0) {
              item.isOnJob = false;
              return;
            }
          });
          res.data.data.map(item => {
            item.stats = Number(item.stats);
          });
          this.employeeList = res.data.data;
          this.devicetotal = res.data.count;
        }
      });
    },
    // 点击开始离职 判断是true 还是false
    handlerStatus(e, value) {
      const params = {
        id: value.workerId,
        isOnJob: Number(value.isOnJob),
        userId: this.maintenanceForm.userId
      };
      this.postRequest(changeStatus, params).then(res => {
        if (res.code == 200) {
          this.$message.success("更新状态成功");
        }
      });
    },
    // 点击添加显示添加员工弹框
    showAddmaintenance() {
      this.maintenanceName = "添加操作员工";
      this.showMessage = true;

      this.wokerKindId = 2;
      this.maintenanceDisabled = false;
      this.phoneDisabled = false;
      this.maintenanceDialog = !this.maintenanceDialog;
      this.getserviceSel();
      this.getroleSel();
    },
    // 点击编辑显示编辑员工的弹框
    showEditmaintenance(id, editdata) {
      this.showMessage = false;
      this.wokerKindId = editdata.wokerKind;
      this.maintenanceDisabled = false;
      this.phoneDisabled = true;
      this.maintenanceName = "编辑操作员工";
      this.maintenanceDialog = !this.maintenanceDialog;
      this.maintenanceForm.examine = editdata.examine;
      this.messageWorkerId = id;

      const params = {
        id: id
      };
      this.postRequest(employeeDetail, params).then(res => {
        this.maintenanceForm.jobNo = res.data[0].jobNo;
        this.maintenanceForm.serviceId = Number(res.data[0].serviceId);
        this.maintenanceForm.petName = res.data[0].petName;
        this.maintenanceForm.phone = res.data[0].phone;
        this.maintenanceForm.examine = res.data[0].examine;
        this.maintenanceForm.modelId = res.data[0].modle.map(v =>
          Number(v.modelId)
        );
        this.maintenanceForm.typeId = res.data[0].type.map(v =>
          Number(v.typeId)
        );
        this.maintenanceForm.employee_id = res.data[0].workerId;
        this.maintenanceForm.user_id = res.data[0].userId;
        this.maintenanceForm.wokerKind = res.data[0].wokerKind;
        this.maintenanceForm.roleId =
          res.data[0].roleId == 1 ? "超级管理员" : res.data[0].roleId;
      });

      this.getserviceSel();
      this.getroleSel();
    },
    // 点击查看显示查看员工的弹框
    showlookmaintenance(id, editdata) {
      this.wokerKindId = editdata.wokerKind;
      this.maintenanceDisabled = true;
      this.phoneDisabled = true;
      this.showMessage = false;
      this.maintenanceName = "查看操作员工";
      this.maintenanceDialog = !this.maintenanceDialog;
      this.maintenanceForm.examine = editdata.examine;
      const params = {
        id: id
      };
      this.postRequest(employeeDetail, params).then(res => {
        this.maintenanceForm.jobNo = res.data[0].jobNo;
        this.maintenanceForm.serviceId = Number(res.data[0].serviceId);
        this.maintenanceForm.petName = res.data[0].petName;
        this.maintenanceForm.phone = res.data[0].phone;
        this.maintenanceForm.examine = res.data[0].examine;
        this.maintenanceForm.modelId = res.data[0].modle.map(v =>
          Number(v.modelId)
        );
        this.maintenanceForm.typeId = res.data[0].type.map(v =>
          Number(v.typeId)
        );
        this.maintenanceForm.employee_id = res.data[0].workerId;
        this.maintenanceForm.user_id = res.data[0].userId;
        this.maintenanceForm.wokerKind = res.data[0].wokerKind;
        this.maintenanceForm.roleId =
          res.data[0].roleId == 1 ? "超级管理员" : res.data[0].roleId;
      });

      this.getserviceSel();
      this.getroleSel();
    },
    // 点击确定
    handlerSure() {
      this.$refs["maintenanceRef"].validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.maintenanceName == "添加操作员工") {
          this.handlerAdd();
        } else if (this.maintenanceName == "编辑操作员工") {
          this.handlerEdit();
        }
      });
    },
    // 封装一个添加员工的方法
    handlerAdd() {
      this.maintenanceForm.modelId = this.maintenanceForm.modelId.join(",");
      this.maintenanceForm.typeId = this.maintenanceForm.typeId.join(",");
      this.maintenanceForm.companyId = this.org_id;
      this.postRequest(employeeAdd, this.maintenanceForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加操作员工成功");
          this.maintenanceDialog = false;
          this.getemployeeSearch();
          this.$refs.maintenanceRef.resetFields();
        } else {
          this.$message.error(res.msg);
          this.maintenanceForm.modelId = [];
          this.maintenanceForm.typeId = [];
        }
      });
    },
    //封装一个 编辑员工的方法
    handlerEdit() {
      const params = {
        serviceId: this.maintenanceForm.serviceId,
        jobNo: this.maintenanceForm.jobNo,
        petName: this.maintenanceForm.petName,
        phone: this.maintenanceForm.phone,
        modelId: this.maintenanceForm.modelId.join(","),
        typeId: this.maintenanceForm.typeId.join(","),
        userId: "",
        id: this.messageWorkerId,
        employee_id: this.maintenanceForm.employee_id,
        user_id: this.maintenanceForm.user_id,
        wokerKind: this.maintenanceForm.wokerKind,
        roleId:
          this.maintenanceForm.roleId == "超级管理员"
            ? 1
            : this.maintenanceForm.roleId,
        companyId: this.org_id,
        examine: this.maintenanceForm.examine
      };
      this.postRequest(employeeUpdate, params).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑操作员工成功");
          this.maintenanceDialog = false;
          this.getemployeeSearch();
          this.$refs["maintenanceRef"].resetFields();
        }
      });
    },
    //获取搜索下拉列表事件
    async getSelect() {
      this.typeList = await this.postRequest(devicTypeList, {
        companyId: this.org_id
      }).then(res => res.data); //设备类型列表
      this.versionList = await this.postRequest(devicModelList, {
        companyId: this.org_id
      }).then(res => res.data); //设备型号
    },
    //设备型号
    handleSelectmodelId(val) {
      this.maintenanceForm.modelId = val;
      // this.$forceUpdate()
    },
    // 设备类型
    handleSelecttypeId(val) {
      this.maintenanceForm.typeId = val;
    },
    //获取服务商id
    handleSelectserviceId(val) {
      this.maintenanceForm.serviceId = val;
    },
    // 获取员工种类id
    handleSelectwokerKind(val) {
      this.maintenanceForm.wokerKind = val;
      this.wokerKindId = val;
      if (val == 2) {
        this.roleDiabled = true;
      }
    },
    // 获取角色id
    handleSelectroleId(val) {
      this.maintenanceForm.roleId = val;
    },
    // 获取服务商列表
    getserviceSel() {
      this.postRequest(serviceSel, { companyId: this.org_id }).then(res => {
        if (res.code == 200) {
          this.serviceSelList = res.data;
          if (
            window.sessionStorage.getItem("servierID") == "" ||
            window.sessionStorage.getItem("servierID") == null
          ) {
            this.value = res.data[0].id;
            this.getemployeeSearch();
          } else {
            this.getSelect();
            this.getemployeeSearch();
          }
        }
      });
    },
    handleClose() {
      this.$refs["maintenanceRef"].resetFields();
      this.maintenanceDialog = false;
      this.roleDiabled = false;
    },
    // 日期搜索
    handlerdate(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.deviceListQuery.startTime = "";
        this.deviceListQuery.endTime = "";
        this.getemployeeSearch();
      } else {
        this.deviceListQuery.startTime = value[0];
        this.deviceListQuery.endTime = value[1];
        this.getemployeeSearch();
      }
    }
    // // 获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    // // 拿到公司的id
    // handlercompanyId(val) {
    //   this.ruleForm.companyId = val;
    // }
  },
  created() {
    this.value = window.sessionStorage.getItem("servierID");
    this.getDataInit();
    this.handlergetFreeWorker();

    // this.maintenanceForm.userId = JSON.parse(sessionStorage.getItem("userId"));
  }
};
</script>
<style lang="less" scoped>
.MaintenanceStaff {
  padding: 20px;
  border: 1px solid #e4e7ed;
  .el-dropdown-link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(62, 63, 66, 1);
    cursor: pointer;
  }
  .cut {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: block;
  }

  .table {
    margin-top: 30px;
  }

  .img {
    width: 80px;
    height: 120px;
    display: block;
    margin-right: 30px;
  }
  .MaintenanceStaff_top {
    border: 1px solid #fcfdfd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px 0;
    .MaintenanceStaff_top_right {
      margin-left: auto;
    }
  }
  .MaintenanceStaff_center {
    border: 1px solid #e4e7ed;
    .demo-ruleForm {
      margin-top: 15px;
      min-width: 1100px;
    }
  }
  .tableUl {
    li {
      img {
        vertical-align: middle;
      }
    }
  }
}
</style>
